<script setup lang="ts">
import { reactive, onMounted, computed, nextTick } from "vue";
import * as $conferencefApi from "@/api/sci/paper/conference";
import * as $fileApi from "@/api/sci/file";
import * as $depApi from "@/api/sys/dep";
import * as $accountApi from "@/api/sci/account";
import * as $msgApi from "@/api/sci/msg";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import _ from "lodash";
import saveAs from "file-saver";
import { Search } from "@element-plus/icons-vue";
import { useAuthStoreHook } from "@/store/modules/auth";
import PaperConfForm from "../modules/PaperConf-form.vue";

defineOptions({
  name: "paper_conference"
});

//数据初始化
onMounted(() => {
  _loadData();
  allDepartment();
  nextTick(() => {
    paperConf.value = ref<InstanceType<typeof PaperConfForm> | null>(null);
  });
});
//本页面名称
const type = "PaperConf";
//用户权限列表
const permissionList = ref([]);
const control = reactive({
  isLook: true,
  isAdd: false,
  centerDialogVisible: false
});
// //是否为查看表单（非修改）
// const isLook = ref(true);
// //是否是添加表单
// const isAdd = ref(false);
// // 详细信息表单开关
// const centerDialogVisible = ref(false);
//导出属性选择项开关
const exportDialogVisible = ref(false);
//核算树
const accountTree = ref();
//持久数据响应表单
const pageData: any = reactive({
  //表格数据列表
  conferList: [],
  //部门列表
  depList: [],
  //分页配置
  pagination: {
    defaultPageSize: 10,
    total: 0
  }
});
//增改表单数据
const formInline = reactive({
  id: "",
  status: 0,
  textNumber: 0,
  bonus: 0,
  confName: "",
  confTime: "",
  department: "",
  firstAuthor: "",
  level: "",
  modified: "",
  nickname: "",
  otherAuthor: "",
  path: "",
  point: "",
  press: "",
  remark: "",
  spot: "",
  title: "",
  type: "",
  username: ""
});
//searchData去除空参后的表单
const rmSearchData = ref();
//搜索表单字段
const searchData = reactive({
  nickname: "",
  department: "",
  title: "",
  firstAuthor: "",
  otherAuthor: "",
  press: "",
  confName: "",
  type: "",
  status: [],
  level: "",
  modified: "",
  startTime: "",
  endTime: "",
  size: 10,
  current: 1
});
//消息表单
const msgData = reactive({
  sciId: "",
  proposal: "",
  type: ""
});
//导出数据列表
const exportDataList = reactive({
  values: null,
  query: null
});
//
const allStatusOptions = [
  { label: "已撤销", value: 0 },
  { label: "学院退回", value: 1 },
  { label: "学校退回", value: 2 },
  { label: "待学院审核", value: 3 },
  { label: "待学校审核", value: 4 },
  { label: "审核通过", value: 5 }
];
//权限验证函数
const hasPermission = computed(() => {
  return (...types: string[]) => {
    const permissionKey = `sci:paper:conference:${types.join(":")}`;
    return permissionList.value.includes(permissionKey);
  };
});
// transformData 函数：将原始数据转换为简化的格式
const transformData = (data: any[]): any[] => {
  return data.map(item => ({
    label: item.title,
    value: item.id,
    point: item.point,
    bonus: item.bonus,
    children:
      item.children && item.children.length > 0
        ? transformData(item.children)
        : []
  }));
};

//添加会议论文具体实现
const __save = () => {
  // console.log(formInline.path);
  $conferencefApi
    .save(formInline)
    .then((res: any) => {
      if (res.success) {
        ElMessage({
          message: "添加会议论文成功",
          type: "success"
        });
        msgData.type = type;
        msgData.sciId = res.result.id;
        _saveMsg();
      }
    })
    .catch(error => {
      console.error("添加会议论文失败:", error);
      ElMessage.error("添加会议论文失败");
    })
    .finally(() => {
      // 不论成功或失败，刷新数据
      _loadQueryPage();
      // resetValidate();
      control.centerDialogVisible = false;
    });
};
//添加历史消息，与添加项目保持统一
const _saveMsg = () => {
  $msgApi
    .saveMessage(msgData)
    .then(res => {
      if (res.success) {
        ElMessage({
          message: "添加消息成功",
          type: "success"
        });
      }
    })
    .catch(err => {
      ElMessage({
        message: "添加消息失败，请稍后再试" + err,
        type: "error"
      });
    });
};
// //更新数据请求
// const _update = () => {
//   formRef.value.validate(valid => {
//     if (valid) {
//       // 校验成功，继续执行保存操作
//       if (fileList.value.length === 0) {
//         __update();
//       } else {
//         upload.value.submit();
//       }
//     } else {
//       // 校验失败，发送提示
//       ElMessage.error("表单校验失败，请检查输入");
//     }
//   });
// };
// //更新数据请求
// const __update = () => {
//   // console.log(formInline.path);
//   $conferencefApi
//     .update(formInline.id, formInline)
//     .then(() => {
//       ElMessage({
//         message: "添加成功",
//         type: "success"
//       });
//     })
//     .catch(err => {
//       ElMessage({
//         message: "添加失败，请稍后再试" + err,
//         type: "error"
//       });
//     })
//     .finally(() => {
//       _loadQueryPage();
//       // resetValidate();
//       centerDialogVisible.value = false;
//     });
// };
//删除数据请求
const _deleteByIds = () => {
  $conferencefApi
    .del(selectedIds.value)
    .then(() => {
      ElMessage({
        message: "删除成功",
        type: "success"
      });
    })
    .catch(err => {
      ElMessage({
        message: "删除失败，请稍后再试" + err,
        type: "error"
      });
    })
    .finally(() => {
      _loadQueryPage();
    });
};
// 加载数据
const _loadData = () => {
  _loadQueryPage();
  // _loadPerssion();
  //加载核算树
  $accountApi.treeList(type).then(res => {
    accountTree.value = transformData(res.result[0].children);
  });
  //持久化用户权限
  permissionList.value = useAuthStoreHook().getPermission();
};
//加载项目数据
const _loadQueryPage = () => {
  //去除空参数
  rmSearchData.value = _.omitBy(
    searchData,
    value =>
      value === null ||
      value === "" ||
      value === undefined ||
      (_.isObject(value) && _.isEmpty(value))
  );
  //分页查询
  $conferencefApi
    .queryPage(rmSearchData.value)
    .then((res: any) => {
      if (res.success) {
        pageData.conferList = res.result.records;
        pageData.pagination.total = Number(res.result.total);
      }
    })
    .catch(error => {
      console.error("请求出错:", error);
    });
};
const _loadPerssion = () => {};
// 计算属性：根据权限过滤状态选项
const filteredStatusOptions = computed(() => {
  if (!permissionList.value.includes(`sci:paper:conference:query:user`)) {
    if (permissionList.value.includes(`sci:paper:conference:query:dep_head`)) {
      return [allStatusOptions[3], allStatusOptions[5]];
    } else if (
      permissionList.value.includes(`sci:paper:conference:query:sch_head`)
    ) {
      return [allStatusOptions[4], allStatusOptions[5]];
    } else if (
      permissionList.value.includes(`sci:paper:conference:query:reviewer`)
    ) {
      return [];
    }
  }
  return allStatusOptions;
});
//导出函数
const _exportData = () => {
  if (checkedValue.value[0] === null) {
    checkedValue.value.forEach(key => {
      if (values[key]) {
        selectedValues[key] = values[key]; // 赋值
      }
    });
    exportDataList.values = selectedValues;
    exportDataList.query = rmSearchData.value;
    $conferencefApi.exportData(exportDataList).then(res => {
      const binaryData = [];
      binaryData.push(res);
      const blob = new Blob(binaryData); // fileStream 是文件流，一般从后台获取
      saveAs(blob, "exported-data.xlsx"); // fileName 保存文件的名称，需要带后缀
    }); // 释放 URL 对象
    checkedValue.value = [];
  } else {
    ElMessage({
      message: "请勾选参数",
      type: "warning"
    });
  }
};
//撤销
const _quash = async (id: any) => {
  // 确保赋值操作完成后再继续
  await new Promise(resolve => {
    formMsg.sciId = id;
    formMsg.type = type;
    resolve(true); // 明确告知赋值完成
  });

  $msgApi
    .update(0, formMsg)
    .then(res => {
      if (res.success) {
        ElMessage({
          message: "撤销成功",
          type: "success"
        });
      }
    })
    .catch(error => {
      ElMessage({
        message: error.message || "撤销失败，请检查网络或稍后再试。",
        type: "error"
      });
    })
    .finally(() => {
      _loadQueryPage();
    });
};
const allDepartment = () => {
  $depApi.queryList().then((res: any) => {
    if (res.success) {
      pageData.depList = res.result;
    }
  });
};
const formMsg = reactive({
  id: "",
  proposal: "",
  type: "",
  sciId: ""
});
//更新消息，相当于审核功能
const updateMsg = isPass => {
  formMsg.sciId = formInline.id;
  formMsg.type = type;
  // console.log(formMsg);
  // 动态设置提示框的内容
  const promptMessage = isPass
    ? "请输入审批意见（非必填）"
    : "请输入审批意见（必填）";
  const inputPattern = isPass ? /.*/ : /.+/; // 如果是必填，要求输入非空内容
  const inputErrorMessage = isPass ? "" : "审批意见不能为空"; // 必填时提供错误提示

  ElMessageBox.prompt(promptMessage, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    inputPattern: inputPattern,
    inputErrorMessage: inputErrorMessage
  })
    .then(({ value }) => {
      formMsg.proposal = value;
      _updateMsg(isPass);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "输入已取消"
      });
    });
};
const _updateMsg = isPass => {
  $msgApi
    .update(isPass, formMsg)
    .then(res => {
      if (res.success) {
        ElMessage({
          message: "审批成功",
          type: "success"
        });
      }
    })
    .catch(error => {
      ElMessage({
        message: error.message || "添加失败，请检查网络或稍后再试。",
        type: "error"
      });
    })
    .finally(() => {
      _loadQueryPage();
    });
};
const paperConf = ref(null);
// 添加数据打开框
const save = () => {
  control.centerDialogVisible = true;
  nextTick(() => {
    if (paperConf.value) {
      paperConf.value.resetForm(true, {}, false); // 传递 `false` 表示是更新, `false` 表示可以修改
    } else {
      console.error("paperConfForm is not initialized");
    }
  });
};
// 更新数据
const updateRow = row => {
  control.centerDialogVisible = true;
  nextTick(() => {
    if (paperConf.value) {
      paperConf.value.resetForm(false, row, false); // 传递 `false` 表示是更新, `false` 表示可以修改
    } else {
      console.error("paperConfForm is not initialized");
    }
  });
  // 传递 `false` 表示是更新, `false` 表示可以修改
};

//删除功能实现
const selectedIds = ref<string[]>([]);
//删除多个文件
const deleteRows = () => {
  ElMessageBox.confirm("确认要删除多条记录吗？", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      _deleteByIds();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    })
    .finally(() => {
      // 不论成功或失败，刷新数据
      _loadQueryPage();
    });
};
//删除单个文件
const deleteRow = (id: string) => {
  ElMessageBox.confirm("确认要删除该条记录吗？", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      selectedIds.value = [];
      selectedIds.value.push(id);
      _deleteByIds();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    })
    .finally(() => {
      // 不论成功或失败，刷新数据
      _loadQueryPage();
    });
};
//数据导出
const checkAll = ref(false);
const isIndeterminate = ref(true);
const checkedValue = ref([]);
const selectedValues = reactive({});
const values = {
  department: "院系",
  username: "工号",
  nickname: "姓名",
  title: "题目",
  firstAuthor: "第一作者",
  otherAuthor: "其它作者",
  press: "出版社",
  confName: "会议名称",
  spot: "会议地点",
  confTime: "会议时间",
  level: "会议级别",
  type: "奖励类别",
  point: "业绩点",
  bonus: "科研奖励(万元)",
  textNumber: "字数(千)"
};
const handleCheckAllChange = (val: boolean) => {
  checkedValue.value = val ? Object.keys(values) : [];
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length;
  checkAll.value = checkedCount === Object.keys(values).length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < Object.keys(values).length;
};
//下载文件模块
const filename = ref(); //下载文件的名字
const selectedPaths = ref<string[]>([]); //下载文件路径的集合
//下载多个文件到zip
const downlFileRows = () => {
  _downlFile();
};
// 提取 path 并存储到 selectedPaths 中
const handleSelectionChange = (val: any) => {
  selectedPaths.value = val.map(item => item.path);
  selectedIds.value = val.map(item => item.id);
};
//下载单个文件
const downlFileRow = (path: string) => {
  selectedPaths.value = [];
  selectedPaths.value.push(path);
  _downlFile();
};
//下载文件具体实现
const _downlFile = () => {
  //判断是否为多个文件
  filename.value = "download.zip";
  if (selectedPaths.value.length == 1) {
    filename.value = "download.pdf";
  }
  //发送下载请求
  $fileApi.downloadFile(selectedPaths.value).then(res => {
    const binaryData = [];
    binaryData.push(res);
    const blob = new Blob(binaryData); // 创建blob对象
    saveAs(blob, filename.value); // 调用file-saver保存
  });
};
//预览文件
const previewFileRow = (row: any) => {
  Object.assign(formInline, row);
  _previewFile();
};
//预览文件具体实现
const _previewFile = () => {
  $fileApi
    .previewFile(formInline.path)
    .then((res: any) => {
      const binaryData = [];
      binaryData.push(res);
      const pdfUrl = window.URL.createObjectURL(
        new Blob(binaryData, { type: "application/pdf" })
      );
      window.open(pdfUrl, "_blank");
    })
    .catch(error => {
      console.error("Error previewing file:", error);
    });
};

// 双击表单方法
const dblClickRow = row => {
  control.centerDialogVisible = true;
  nextTick(() => {
    if (paperConf.value) {
      paperConf.value.resetForm(false, row, true); // 传递 `false` 表示是更新, `false` 表示可以修改
    } else {
      console.error("paperConfForm is not initialized");
    }
  });
};

const handleSizeChange = (val: number) => {
  searchData.size = val;
  _loadQueryPage();
};
const handleCurrentChange = (val: number) => {
  searchData.current = val;
  _loadQueryPage();
};
</script>

<template>
  <el-card :shadow="'never'">
    <div>
      <el-form
        :inline="true"
        :model="searchData"
        class="demo-form-inline"
        label-width="auto"
        width="100%"
      >
        <el-form-item label="题目" label-position="right" label-width="100px">
          <el-input v-model="searchData.title" style="width: 200px" clearable />
        </el-form-item>
        <el-form-item
          label="院系部门"
          label-position="right"
          label-width="100px"
        >
          <el-select
            filterable
            v-model="searchData.department"
            placeholder="请选择院系部门"
          >
            <el-option
              v-for="item in pageData.depList"
              :key="item.id"
              :value="item.department"
            />
            <el-option label="区域一" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期" label-position="right" label-width="100px">
          <el-col :span="11">
            <el-date-picker
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="开始日期"
              v-model="searchData.startTime"
              style="width: 100%"
            />
          </el-col>
          <el-col class="line" style="text-align: center" :span="2">——</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="结束日期"
              v-model="searchData.endTime"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="姓名" label-position="right" label-width="100px">
          <el-input
            v-model="searchData.nickname"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="第一作者"
          label-position="right"
          label-width="100px"
        >
          <el-input
            v-model="searchData.firstAuthor"
            style="width: 100px"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="其它作者"
          label-position="right"
          label-width="100px"
        >
          <el-input
            v-model="searchData.otherAuthor"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="会议名称"
          label-position="right"
          label-width="150px"
        >
          <el-input v-model="searchData.confName" clearable />
        </el-form-item>
        <el-form-item label="出版社" label-position="right" label-width="100px">
          <el-input v-model="searchData.press" style="width: 100px" clearable />
        </el-form-item>

        <el-form-item
          label="会议级别"
          label-position="right"
          label-width="100px"
        >
          <el-select
            filterable
            v-model="searchData.level"
            placeholder=" "
            style="width: 100px"
          >
            <el-option label="国内" value="国内" />
            <el-option label="国际" value="国际" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="奖励类别"
          label-position="right"
          label-width="100px"
        >
          <el-tree-select
            v-model="searchData.type"
            :data="accountTree"
            :render-after-expand="false"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item
          label="项目状态"
          label-position="right"
          label-width="150px"
        >
          <el-select
            filterable
            v-model="searchData.status"
            placeholder="请选择"
            style="width: 120px"
          >
            <el-option
              v-for="option in filteredStatusOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label-position="left" label-width="200px">
          <el-button
            type="primary"
            :icon="Search"
            style="width: 60px; margin-left: 40px"
            @click="_loadData"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="save()" v-if="hasPermission('save')">
        <el-icon style="vertical-align: middle">
          <DocumentAdd />
        </el-icon>
        <span style="vertical-align: middle"> 添加 </span>
      </el-button>
      <el-button
        type="primary"
        @click="exportDialogVisible = true"
        v-if="hasPermission('export')"
      >
        <el-icon style="vertical-align: middle">
          <Document />
        </el-icon>
        <span style="vertical-align: middle"> 导出 </span>
      </el-button>

      <el-button
        type="primary"
        @click="downlFileRows"
        v-if="hasPermission('upload')"
      >
        <el-icon style="vertical-align: middle">
          <Download />
        </el-icon>
        <span style="vertical-align: middle"> 批量下载附件 </span>
      </el-button>

      <el-button
        type="primary"
        @click="deleteRows()"
        v-if="hasPermission('delete')"
      >
        <el-icon style="vertical-align: middle">
          <DocumentRemove />
        </el-icon>
        <span style="vertical-align: middle">批量删除 </span>
      </el-button>
      <el-button type="primary" @click="_loadQueryPage()">
        <el-icon style="vertical-align: middle">
          <RefreshRight />
        </el-icon>
        <span style="vertical-align: middle"> 刷新</span>
      </el-button>
    </div>

    <div class="table-wrapper" style="margin-top: 20px">
      <el-scrollbar>
        <el-table
          border
          @selection-change="handleSelectionChange"
          :data="pageData.conferList"
          stripe
          @row-dblclick="dblClickRow"
          :header-cell-style="{ padding: '3px' }"
          :row-style="{ height: '80px' }"
          :resizable="false"
          height="900"
        >
          <!-- <template #default="scope" > -->
          <el-table-column
            type="selection"
            width="30"
            align="center"
            :resizable="false"
          />
          <el-table-column
            width="60"
            label="序号"
            align="center"
            :resizable="false"
          >
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="department"
            label="院系部门"
            align="center"
            :resizable="false"
          />
          <el-table-column
            label="姓名（工号）"
            align="center"
            width="120"
            :resizable="false"
          >
            <template v-slot="scope">
              <span>{{ scope.row.nickname }}({{ scope.row.username }})</span>
              <!-- 显示工号 -->
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="论文题目"
            align="center"
            show-overflow-tooltip
            :resizable="false"
          />
          <el-table-column
            prop="firstAuthor"
            label="第一作者"
            align="center"
            :resizable="false"
          />
          <el-table-column
            prop="confName"
            label="会议名称"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column prop="level" label="会议级别" align="center" />
          <el-table-column prop="press" label="出版社" align="center" />
          <el-table-column prop="type" label="奖励类别" align="center" />
          <el-table-column
            prop="point"
            label="业绩点"
            width="70"
            align="center"
          />
          <el-table-column prop="bonus" label="科研奖金（万）" align="center" />
          <el-table-column
            prop="confTime"
            label="会议时间"
            width="100"
            align="center"
          >
            <template #default="scope">
              {{
                scope.row.confTime ? scope.row.confTime.substring(0, 10) : "-"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template #default="scope">
              <span>
                <!-- 根据状态值显示不同的状态 -->
                <span v-if="scope.row.status === 0">已撤回</span>
                <span v-if="scope.row.status === 1">学院退回</span>
                <span v-else-if="scope.row.status === 2">学校退回</span>
                <span v-else-if="scope.row.status === 3">待学院审核</span>
                <span v-else-if="scope.row.status === 4">待学校审核</span>
                <span v-else-if="scope.row.status === 5">通过</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="170"
            align="center"
          >
            <template #default="scope">
              <div>
                <el-button
                  type="success"
                  bg
                  size="small"
                  @click="previewFileRow(scope.row)"
                  v-if="hasPermission('preview') && scope.row.path != ''"
                  >预览</el-button
                >

                <el-button
                  type="info"
                  bg
                  size="small"
                  @click="downlFileRow(scope.row.path)"
                  v-if="hasPermission('upload')"
                  >下载</el-button
                >
              </div>
              <div style="margin-top: 10px">
                <el-popconfirm
                  title="确定要删除此项?"
                  @confirm="_quash(scope.row.id)"
                  v-if="hasPermission('quash') && scope.row.status == 3"
                >
                  <template #reference>
                    <el-button type="danger" bg size="small">撤销</el-button>
                  </template>
                </el-popconfirm>

                <el-button
                  type="warning"
                  bg
                  size="small"
                  @click="updateRow(scope.row)"
                  v-if="hasPermission('update')"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  bg
                  size="small"
                  @click="deleteRow(scope.row.id)"
                  v-if="hasPermission('delete')"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>

          <!-- </template> -->
        </el-table>
      </el-scrollbar>
      <div style="margin-top: 10px; margin-left: 20%">
        <el-pagination
          v-model:current-page="searchData.current"
          v-model:page-size="searchData.size"
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 详细信息展示 -->
    <el-dialog
      v-model="control.centerDialogVisible"
      title="详细信息"
      width="750"
      align-center
    >
      <PaperConfForm
        ref="paperConf"
        v-model:formInline="formInline"
        v-model:control="control"
        :accountTree="accountTree"
        :hasPermission="hasPermission"
        :_loadQueryPage="_loadQueryPage"
        :__save="__save"
      />
      <template #footer>
        <div class="dialog-footer" v-if="control.isLook">
          <el-button type="primary" v-if="hasPermission('quash')">
            <el-icon style="vertical-align: middle">
              <Filter />
            </el-icon>
            <span style="vertical-align: middle"> 审查</span>
          </el-button>
          <el-button
            type="primary"
            @click="_previewFile"
            v-if="hasPermission('preview') && formInline.path != ''"
          >
            <el-icon style="vertical-align: middle">
              <FullScreen />
            </el-icon>
            <span style="vertical-align: middle"> 预览</span>
          </el-button>
          <el-button
            type="primary"
            @click="
              control.centerDialogVisible = false;
              updateMsg(1);
            "
            v-if="hasPermission('approval')"
            >审批通过</el-button
          >
          <el-button
            type="primary"
            @click="
              control.centerDialogVisible = false;
              updateMsg(0);
            "
            v-if="hasPermission('approval')"
            >审批不通过</el-button
          >
          <el-button
            type="primary"
            @click="
              control.centerDialogVisible = false;
              control.isLook = true;
            "
          >
            关闭
          </el-button>
        </div>
      </template>
      <!-- <el-form
        ref="formRef"
        :rules="rules"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="auto"
        :disabled="isLook"
      >

        <el-form-item>
          <el-upload
            ref="upload"
            v-model:file-list="fileList"
            class="upload-demo"
            action=""
            :auto-upload="false"
            :http-request="_uploadFile"
            accept=".pdf"
            :limit="1"
            :on-exceed="handleExceed"
            style="height: 100px"
          >
            <el-button type="primary" style="margin-top: 33px"
              >上传附件</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" v-if="isAdd">
          <el-button type="primary" @click="_save()">确认添加</el-button>
          <el-button
            type="primary"
            @click="
              centerDialogVisible = false;
              isLook = true;
            "
          >
            关闭
          </el-button>
        </div>
        <div class="dialog-footer" v-else>
          <el-button type="primary" v-if="hasPermission('quash')">
            <el-icon style="vertical-align: middle">
              <Filter />
            </el-icon>
            <span style="vertical-align: middle"> 审查</span>
          </el-button>
          <el-button
            type="primary"
            @click="_previewFile"
            v-if="hasPermission('preview') && formInline.path != ''"
          >
            <el-icon style="vertical-align: middle">
              <FullScreen />
            </el-icon>
            <span style="vertical-align: middle"> 预览</span>
          </el-button>
          <el-button
            type="primary"
            @click="
              centerDialogVisible = false;
              updateMsg(1);
            "
            v-if="hasPermission('approval')"
            >审批通过</el-button
          >
          <el-button
            type="primary"
            @click="
              centerDialogVisible = false;
              updateMsg(0);
            "
            style="margin-inline-end: 120px"
            v-if="hasPermission('approval')"
            >审批不通过</el-button
          >
          <el-button type="primary" v-if="!isLook" @click="_update()"
            >确定修改</el-button
          >
          <el-button
            type="primary"
            @click="
              centerDialogVisible = false;
              isLook = true;
            "
          >
            关闭
          </el-button>
        </div>
      </template> -->
    </el-dialog>
    <!-- 导出属性选择框 -->
    <el-dialog
      v-model="exportDialogVisible"
      title="选择属性"
      width="500"
      align-center
    >
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <el-checkbox-group
        v-model="checkedValue"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="(key, value) in values"
          :key="value"
          :label="value"
          :value="value"
        >
          {{ key }}
        </el-checkbox>
      </el-checkbox-group>
      <!-- <el-row>
        <el-col :span="8">
          <el-date-picker
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="起始会议日期"
            v-model="exportDataList.startTime"
            style="width: 150px"
          />
        </el-col>
        <el-col class="line" style="text-align: center" :span="2">——</el-col>
        <el-col :span="9">
          <el-date-picker
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="结束会议日期"
            v-model="exportDataList.endTime"
            style="width: 150px"
          />
        </el-col>
      </el-row> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="
              exportDialogVisible = false;
              _exportData();
            "
            >确认导出</el-button
          >
          <el-button type="primary" @click="exportDialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>
<!-- lang="scss" scoped -->
<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
//input   clearable  属性不撑开
:deep(.el-input__wrapper) {
  position: relative;
  .el-input__inner {
    padding-right: 18px;
  }
  .el-input__suffix {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}
//table每行的的padding取消
:deep(.el-table .cell) {
  padding: 0px;
}
</style>
